<template>
  <div id="googleVal">
       <section class="order-main-header">
             <mt-header title="谷歌验证设置">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
      <p class="google-word-1">{{googleTip[1]}}</p>
       <div class="outer flex-all-center"> <div id="qrcode"></div></div>
      <input class="google-word-2 tag-read" id="key" v-model="googleTip[3]" type="text">
      <span class="google-word-3"  @click="copy()">复制</span>
      <p class="google-word-4">{{googleTip[4]}}</p>
         <div class="val-input">
            <span class="val-i-left">{{sessionData}}</span>
            <input class="val-i-input val-i-code" type="text" placeholder="请输入验证码" v-model="code">
            <button @click="sendCode" :style="btnColor">{{sendCodeText}}</button>
        </div>
      <div class="google-code">
          <span>谷歌验证码</span>
            <input type="text" v-model="googleCode" placeholder="请输入谷歌验证码">
      </div>
       <span class="google-word-3" @click="start()" >确认开启谷歌验证</span>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return{
            googleTip:{
                1:'请妥善备份秘钥以防丢失',
                2:'',
                3:'',
                4:'保存二维码或复制秘钥到手机可能会有安全风险，请妥善保存'
            },
            googleCode:'',
             sendCodeText:'发送',
              btnColor:'color:#5298F1',
              code:'',
              sessionData:''
        }
    },
    components:{
    },
    watch:{
        
    },
    methods: {
        sendCode(){
             this.$http.post('/v1/account/sendCode').then(res=>{
                res = res.data
                if(res.code == 200){
                    this.sendCodeText = 60
                    this.btnColor = 'color:#666'
                    var timeId = setInterval(function(){
                        this.sendCodeText--
                        if(this.sendCodeText == 0 || this.clearTime){
                            clearInterval(timeId)
                            this.btnColor = 'color:#5298F1'
                            this.sendCodeText = '发送'
                        }
                    }.bind(this),1000)
                }
            }).catch(err=>{

            })
        },
        start(){
       var  googleCode = this.googleCode;
        if (googleCode=='') {
            Toast({
                    message: '请输入谷歌验证码',
                    duration: 2000
                    });
            return;
        }
        var params={
            code:googleCode,
            smsCode:this.code
        }
         this.$http.post('/v1/account/googleToken', params,).then(res=>{
             let data=res.data;
            if(data.code==13){
                 Toast({
                    message: '谷歌验证码错误，请重新输入',
                    duration: 2000
                    });
                return;
            }else if(data.code==200){
                  Toast({
                    message: '谷歌认证成功',
                    duration: 2000
                    });
                    this.$router.go(-1);
                return;
            }else if(data.code==102){
                  Toast({
                    message: '验证码错误',
                    duration: 2000
                    });
            }else{
                Toast({
                    message: '网络错误',
                    duration: 2000
                    });
            }
         })
        },
            handleClose(){
                this.$router.go(-1);
            },
          qrcode () {
           var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: 364,
                height: 364,
            });
               qrcode.clear(); // clear the code.
           qrcode.makeCode( this.googleTip[2] ); // make another code.
        },
        copy() {  
        var Url2=this.googleTip[3];
        Toast("复制成功");
        var oInput = document.createElement('input');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display='none';
      
        },
        googleFun () {
            this.$http.post('/v1/account/googleAuthentication').then(res=>{
                res = res.data
                if(res.code == 200){
                    this.googleTip[2] = res.data.qrcode;
                    this.googleTip[3] = res.data.SecretKey;
                       this.qrcode();
                }
            }).catch(err=>{

            })
        }
    },
    mounted() {
     this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            if(res.data.data.loginName.search("@")>-1){
                 this.sessionData="邮箱验证码";
            }else{
                 this.sessionData="短信验证码";
            }
        })
        this.googleFun()
    },
}
</script>

<style lang="less" scoped>
     #googleVal{
        text-align: center;
        font-family:PingFang SC;
        font-weight:500;
    }
    .user-top {
        height: 110px;
        line-height: 110px;
        padding: 0 60px;
    }
      .flex-all-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
    .google-word-1,.google-word-2{
        font-size:30px;
        color:#fff;
        background: none;
    }
    .qrCode{
        margin-top: 46px;
        width: 312px;
        height: 312px;
    }
    .google-word-1{
        margin-top: 68px;
    }
    .google-word-2{
        display: block;
        margin: 0 auto;
        text-align: center;
        outline: none;
        border: none;
        margin-top: 52px;
    }
    .google-word-2:focus{
        border:none;
    }
    .google-word-3{
        margin-top: 31px;
        background-color: #3381FF;
        width:80%;
        height:86px;
        border-radius: 10px;
        line-height: 86px;
        font-size: 28px;
        color: #fff;
    }
    .google-word-4{
        font-size: 24px;
        margin-top: 36px;
        color: #999999;
    }
    .google-code{
        margin-top: 45px;
        color:#8686C0;
        height: 96px;
        line-height: 96px;
        background-color: #222240;
        span{
            font-size:28px;
        }
        input{
            width: 490px;
            height: 48px;
            outline: none;
            border: none;
            margin-left: 34px;
            font-size: 28px;
            padding-left: 10px;
            background: none;
            color:#8686C0;
        }
    }
    #qrcode{
        border: 2px solid #fff;
        width: 374px;
        height: 374px;
        display: flex;
        img{
            text-align: center;
        }
        margin-top: 40px;
    }
       .mint-header {
    height: 100px;
    font-size: 32px;
    background: #161736;
    color: #E0E0F9;
}
 .val-input{
     margin-left: 20px;
         height: 96px;
    line-height: 96px;
    background-color: #222240;
     margin-top: 45px;
            height: 93px;
            line-height: 93px;
            border-bottom: 2px solid #161736;
            display: flex;
            .val-t{
                width: 169px;
                font-size: 28px;
                color:#8686C0;
                overflow: hidden;
            }
            .val-m{
                font-size: 22px;
                width: 410px;
                overflow: hidden;
            }
            .val-r{
                width: 100px;
                text-align: right;
                font-size: 24px;
                color: #3381ff;
            }
            input{
                line-height: 93px;
                border:none;
                background:none;  
                outline:none;  
                font-size: 30px;
                padding-left: 20px;
                color: #8686c0;
                margin-left: 30px;
            }
            .input-code{
                flex: 1;
            }
            .codeBtn{
                width: 58px;
                text-align: center;
                font-size: 24px;
            }
            input:focus{   
                border:none;
            }
            .val-i-left{
                width: 180px;
                color: #8686C0;
            }
            select{
                width: 420px;
                outline: none;
                border: none;
                font-size: 24px;
                background: none;
                color: #8686C0;
            }
            option{
                font-size: 24px;
            }
            .val-i-input{
                font-size: 24px;
                padding-left: 0;
            }
            .val-i-code{
                width: 430px;
            }
            button{
                width: 80px;
                font-size: 24px;
            }
        }
          ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
        font-size: 28px;
    }
    ::-moz-placeholder { /* Firefox 19+ */  
        font-size: 28px;
    }
    :-ms-input-placeholder { /* IE 10+ */ 
        font-size: 28px;
    }
    :-moz-placeholder { /* Firefox 18- */ 
        font-size: 28px;
    }
</style>